<!-- 
  @author: 善良的YWJ
  @Created by shanliangdeYWJ on 2021/07/12 01:16:09
  @file: Filter.vue
  @description:
  ```
  Filter.vue
  ```
  @link [Github](https://github.com/shanliangdeYWJ)
-->

<template>
  <p class="filters">
    <span
      v-for="item in items"
      :key="item.value"
      :class="[{ selected: modelValue === item.value }]"
      @click="$emit('update:modelValue', item.value)"
    >
      {{ item.label }}
    </span>
  </p>
</template>

<script>
export default {
  name: "Filter",
  props: ["items", "modelValue"],
  emits: ["update:modelValue"],
};
</script>

<style scoped>
.filters > span {
  padding: 2px 4px;
  margin-right: 4px;
  border: 1px solid transparent;
}

.filters > span.selected {
  border: 1px solid rgba(172, 47, 47, 0.2);
  border-radius: 5px;
}
</style>
